<template>
	<div>
		<el-breadcrumb separator="/">
			<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item><a href="/">商品管理</a></el-breadcrumb-item>
		</el-breadcrumb>
		<!-- 表单搜索框 -->
		<el-form ref="form" :inline="true" style="margin-top: 20px;">
			<span>状态：</span>
			<el-button-group style="margin-left: 10px ;">
				<el-button>全部商品</el-button>
				<el-button>上架中</el-button>
				<el-button>已下架</el-button>
			</el-button-group>
			<el-form-item label="商品名称" style="margin-left: 10px;">
				<el-input v-model="shop.goodsName" placeholder="请输入内容" size="small"
					style="width: 200px;margin-right: 10px;"></el-input>
			</el-form-item>
			<el-form-item label="所属门店">
				<el-input v-model="shop.shopName" placeholder="请输入内容" size="small"
					style="width: 200px;margin-right: 10px;"></el-input>
			</el-form-item>
			<el-form-item label="提交日期">
				<el-date-picker value-format="yyyy-MM-dd HH:mm:ss" v-model="date" type="daterange" size="small"
					range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
				</el-date-picker>
			</el-form-item>
			<el-form-item>
				<el-button size="small" type="primary" style="margin-left: 10px;"
					@click="querySearchShopGoodsList">搜索</el-button>
			</el-form-item>
		</el-form>
		<!-- 表格 -->
		<template>
			<el-table :data="shopList" style="width: 100%" border :header-cell-style="{backgroundColor:'#eee'}">
				<el-table-column prop="goodsId" label="ID">
				</el-table-column>
				<el-table-column prop="goodsName" label="商品">
				</el-table-column>
				<el-table-column prop="goodsShopName" label="所属门店">
				</el-table-column>
				<el-table-column prop="goodsSalesVolume" label="销量">
				</el-table-column>
				<el-table-column prop="goodsPresentPrice" label="预估价">
				</el-table-column>
				<el-table-column prop="addTime" label="发布时间">
				</el-table-column>
				<el-table-column label="状态">
					<template slot-scope="scope">
						<el-link :underline="false" type="primary" style="font-size: 12px;margin-right: 10px;"
							 v-show="scope.row.goodsStatus==0">已下架</el-link>
						<el-link :underline="false" type="primary" style="font-size: 12px;margin-right: 10px;"
							v-show="scope.row.goodsStatus==1">已上架</el-link>
					</template>
				</el-table-column>
				<el-table-column label="操作">
					<template slot-scope="scope">
						<el-link :underline="false" type="primary" style="font-size: 12px;margin-right: 10px;"
							@click="sg(scope.row.goodsId)" v-show="scope.row.goodsStatus==0">上架</el-link>
						<el-link :underline="false" type="primary" style="font-size: 12px;margin-right: 10px;"
							@click="xg(scope.row.goodsId)" v-show="scope.row.goodsStatus==1">下架</el-link>
					</template>
				</el-table-column>
			</el-table>
		</template>
		<!-- 分页 -->
		<div class="block">
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
				:current-page="shop.pageNum" :page-sizes="[1, 5, 10, 20]" :page-size="shop.pageSize"
				layout="total, sizes, prev, pager, next, jumper" :total="total">
			</el-pagination>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				shop: {
					goodsName: '',
					shopName: '',
					startTime: '',
					endTime: '',
					pageNum: 1,
					pageSize: 5,
				},
				date: [],
				shopList: [],
				total: 1
			}
		},
		methods: {
			//下架
			xg(id) {
				this.$http.post('goods/modifyShopGoods', {
						goodsId: id,
						goodsStatus: 0
					})
					.then(res => {
						if (res.data.status == 200) {
							this.$message.success('下架成功')
							this.querySearchShopGoodsList()
						}
					})
			},
			//上架
			sg(id) {
				this.$http.post('goods/modifyShopGoods', {
						goodsId: id,
						goodsStatus: 1
					})
					.then(res => {
						if (res.data.status == 200) {
							this.$message.success('上架成功')
							this.querySearchShopGoodsList()
						}
					})
			},
			querySearchShopGoodsList() {
				this.$http.get('goods/querySearchShopGoodsList', {
						params: this.shop
					})
					.then(res => {
						if (res.data.status == 200) {
							this.shopList = res.data.data.list
							this.total = res.data.data.total
						} else {
							this.$message.error('服务器接口异常！')
						}
					})
					.catch(error => {
						this.$message.error('服务器异常！')
					})
			},
			handleSizeChange(val) {
				this.shop.pageSize = val;
				this.shop.pageNum = 1
				this.querySearchShopGoodsList()
			},
			handleCurrentChange(val) {
				this.shop.pageNum = val;
				this.querySearchShopGoodsList()
			}
		},
		watch: {
			date() {
				if (this.date) {
					this.shop.startTime = this.date[0];
					this.shop.endTime = this.date[1];
				} else {
					this.shop.startTime = '';
					this.shop.endTime = '';
				}
			}
			
		},
		mounted() {
			this.querySearchShopGoodsList()
		}
	}
</script>

<style>
</style>